<template>
  <el-popover
    :show-after="500"
    placement="left-start"
    title="切换SKU"
    :width="600"
    @show="open"
  >
    <template #reference>
      <div class="btn-style mb-[2px]">
        切换SKU
        <span v-if="row.alternative_sku_type == 1"
          >({{ row.alternative_sku_count }})</span
        >
      </div>
    </template>
    <div class="dialog-content1">
      <vxe-grid ref="tableRef" v-bind="tableOptionsSupplier"></vxe-grid>
      <!-- <div v-if="row.alternative_sku_type == 2">原始SKU：{{ parent }}</div> -->
    </div>
  </el-popover>
</template>

<script setup lang="jsx">
import { getSKURelationDetail } from "./api.js";
import { reactive, toRefs } from "vue";

const props = defineProps({
  row: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { row } = toRefs(props);

const data = reactive({
  parent: "",
  visible: false,
});

const { parent } = toRefs(data);

const buttonRef = ref();
// 打开弹窗
const open = async () => {
  getRelationList({
    sku_id: row.value.id,
    type: row.value.alternative_sku_type,
  });
};

const getRelationList = (data) => {
  tableOptionsSupplier.data = [];
  tableOptionsSupplier.loading = true;
  getSKURelationDetail(data)
    .then((res) => {
      const list = [
        {
          alternative_sku: {
            sku:
              row.value.alternative_sku_type == 1
                ? row.value.sku + "(旧)"
                : res?.data.parent + "(旧)",
          },
        },
      ];
      if (res?.data?.list.length) {
        list.push(...res?.data?.list);
      }
      tableOptionsSupplier.data = list;
      parent.value = res?.data.parent;
    })
    .finally(() => {
      tableOptionsSupplier.loading = false;
    });
};

const tableOptionsSupplier = reactive({
  round: true,
  height: "350",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [],
  parent: "",
  columns: [
    {
      title: "切换SKU",
      field: "alternative_sku",
      slots: {
        default: ({ row }) => {
          return <div>{row.alternative_sku.sku}</div>;
        },
      },
    },
    {
      title: "SKU中文名",
      field: "sku_cn_title",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText value={row.alternative_sku.sku_cn_title} line={3}></VText>
            </div>
          );
        },
      },
    },
    { title: "备注", field: "remark" },
    {
      title: "添加人/时间",
      field: "create_user_text",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>{row.created_user_text}</div>
              <div>{row.created_at}</div>
            </div>
          );
        },
      },
    },
  ],
});
</script>
<style></style>
